<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-02-28 11:25:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .title {
            font-size: 17px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            padding-right: 10px;
        }

        .date {
            float: right;
            font-size: 12px;
            color: #cbcbcb;
        }

        .sub {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            font-size: 14px;
            color: #a3a3a3;
        }

        .creater {
            font-size: 14px;
        }

        .result span {
            background: #fdf9f8;
            border: 1px solid #eeebec;
            border-radius: 10px;
            font-size: 12px;
            transform: scale(0.9);
            display: inline-block;
            height: 16px;
            line-height: 14px;
            padding: 0 2px;
        }

        .status-0 span {
            transform: scale(1);
            border: 0;
            background: #ffffff;
            color: #e3b474;
        }

        .status-1 span {
            color: #47ba9c;
        }

        .status-2 span {
            color: #dd7e70;
        }

        .bo {
            padding-top: 10px;
        }

        .sq {
            display: inline-block;
            font-size: 13px;
            padding: 0 2px;
            margin-right: 5px;
            min-width: 16px;
            height: 18px;
            line-height: 18px;
            border-radius: 4px;
            text-align: center;
            background-color: #3396fb;
            color: #ffffff;
        }

        .title span {
            vertical-align: middle;
        }

        .tab {
            height: 26px;
        }

        .tab>div {
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #3396fb;
            font-size: 0;
            height: 26px;
        }

        .tab .tab-row {
            display: inline-block;
            font-size: 13px;
            padding: 2px 5px;
            color: #3396fb;
            line-height: 22px;
        }

        .tab .tab-row.on {
            background: #3396fb;
            color: #ffffff;
        }

        .van-search {
            padding: 5px 0;
        }

        .title-read {
            color: #aaacac;
            font-size: 13px;

        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" style="user-select:none;">
            <div style="border-bottom: 1px solid rgba(235,237,240,0.3);">
                <van-nav-bar-main :title="titleName" left-arrow @click-left="onClickLeft">
                    <div slot="right">
                        <div class="tab">
                            <div>
                                <div class="tab-row" :class="sort_value1==0?'on':''" @click="toggleApprove(0)">未完成</div>
                                <div class="tab-row" :class="sort_value1==1?'on':''" @click="toggleApprove(1)">已完成</div>
                            </div>
                        </div>
                    </div>
                </van-nav-bar-main>

                <div>
                    <form action="">
                        <van-search v-model="bizNO" placeholder="请输入业务单据编号查询" @search="refreshList"></van-search>
                    </form>
                </div>
            </div>

            <div class="content">

                <van-list v-model="listLoading1" :finished="listFinished1" finished-text="没有更多了" @load="listOnLoad1">
                    <van-cell-group>
                        <van-cell @click="intoRow(row,'GenApprID','approvalGenPage')" v-for="(row,index) in dataList1">
                            <div>
                                <van-row>
                                    <van-col span="24">
                                        <div class="flex-box">
                                            <div class="flex-main title"><span
                                                    class="sq">{{index+1}}</span><span>{{row.ApprTitle}}</span>
                                            </div>
                                            <div class="date">{{row.ApplyTime}}</div>
                                        </div>
                                    </van-col>
                                    <van-col span="24">
                                        <div class="sub">流水单号：{{row.ApprNO}}</div>
                                        <div class="sub">审批摘要：{{row.ApprDesc}}</div>
                                        <div class="sub">单据类型：{{row.BizType}}</div>
                                        <div class="sub">单据编号：{{row.BizNO}}</div>
                                        <div class="sub">发起部门：{{row.Department}}</div>
                                    </van-col>
                                    <van-col span="24">
                                        <div class="creater">由{{row.ApplyName}}发起</div>
                                    </van-col>
                                </van-row>
                            </div>
                        </van-cell>
                    </van-cell-group>
                </van-list>

            </div>
        </div>

        <van-action-sheet v-model="showAction" :actions="badActions" cancel-text="取消" description="请选择不良类型"
            close-on-click-action @select="confirmAction"></van-action-sheet>

    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        api.addEventListener({
            name: 'refreshList'
        }, function (ret, err) {
            vm.refreshList();
        })





        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                titleName: api.pageParam.titleName,
                bizNO: '',
                dataList1: [],
                dataList2: [],
                dataList3: [],
                pageIndex1: 1,
                pageSize1: 20,
                listLoading1: false,
                listFinished1: true,
                showAction: false,
                badActions: [{
                    name: '所有不良'
                }, {
                    name: '外观'
                }, {
                    name: '尺寸'
                }, {
                    name: '性能'
                }, {
                    name: '其他'
                }],
                ngType: '所有不良',
                sort_value1: 0,
                sort_value2: 'Ck_ReviewID desc',
                appName: ''
            },
            created: function () {
                var that = this;
                that.getDataList();
            },
            methods: {
                getMonth: function (row) {
                    var that = this;
                    if (row.AppDate) {
                        var str = row.AppDate.split('-');
                        return str[0] + '-' + str[1];
                    } else {
                        return '';
                    }
                },
                toggleApprove: function (index) {
                    var that = this;
                    that.sort_value1 = index;
                    that.refreshList();
                },
                confirmAction: function (action, index) {
                    var that = this;
                    that.ngType = action.name;
                    that.refreshList();
                },
                refreshList: function () {
                    var that = this;
                    that.pageIndex1 = 1;
                    that.getDataList();
                },
                getDataList: function () {
                    var that = this;
                    var obj = {
                        pageIndex: that.pageIndex1,
                        pageSize: that.pageSize1,
                        approve: that.sort_value1,
                        bizNO: that.bizNO
                    }
                    APP.ajax('getGenApprList', obj, function (res) {
                        that.dataList1 = res.ds;
                        that.listFinished1 = false;
                    })

                },
                listOnLoad1: function () {
                    var that = this;
                    that.pageIndex1++;
                    var obj = {
                        pageIndex: that.pageIndex1,
                        pageSize: that.pageSize1,
                        approve: that.sort_value1,
                        bizNO: that.bizNO
                    }
                    APP.ajax('getGenApprList', obj, function (res) {
                        that.listLoading1 = false;
                        if (res.ds.length == 0) {
                            that.listFinished1 = true;
                        }
                        that.dataList1 = that.dataList1.concat(res.ds);
                    })
                },
                intoRow: function (row, key, pageName) {
                    var that = this;
                    api.openWin({
                        name: pageName,
                        url: pageName + '.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: {
                            id: row[key]
                        }
                    })
                },
                onClickLeft: function () {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>